<template>
    <div>
        <!-- 外层容器 -->
        <el-container>
            <!-- 上半区域：顶栏 -->
            <el-header class="layout-header">
                <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
                <div class="login-user">
                    <span class="welcome">欢迎您，<b>{{ currentUserName }}</b></span>
                    <el-dropdown @command="handleCommand">
                        <el-avatar shape="square" size="medium" :src="currentUserAvatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-document" command="userInfo">个人信息</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-user" command="updateAccount">修改账号</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-coordinate" command="updateAvater">修改头像
                            </el-dropdown-item>
                            <el-dropdown-item icon="el-icon-lock" command="updatePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 顶栏的标题文字 -->
                <h1>云上企业数字化智慧系统-服务平台</h1>
            </el-header>
            <!-- 下半区域 -->
            <el-container class="layout-body">
                <!-- 下半区域的左侧边栏 -->
                <el-aside class="layout-aside">
                    <el-menu router :default-active="activeMenuItemPath" class="el-menu-vertical-demo"
                             background-color="#3a4856" text-color="#fff" active-text-color="#fff">
                        <el-menu-item index="/message">
                            <template>
                                <i class="el-icon-s-promotion"></i>
                                <el-badge class="mark align-with-icon" :value="unreadRows" v-if="unreadRows!==0"/>
                            </template>
                            <span slot="title">我的消息</span>
                        </el-menu-item>
                        <el-submenu index="document">
                            <template slot="title">
                                <i class="el-icon-s-data"></i>
                                <span>我的记录</span>
                            </template>
                            <el-menu-item index="/documentOut">
                                <i class="el-icon-position"></i>
                                <span slot="title">外勤记录</span>
                            </el-menu-item>
                            <el-menu-item index="/documentSalary">
                                <i class="el-icon-bank-card"></i>
                                <span slot="title">报销补助</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="work" v-if="isWorkbench">
                            <template slot="title">
                                <i class="el-icon-s-platform"></i>
                                <span>办公台</span>
                            </template>
                            <el-menu-item index="/user" v-if="isEmployee">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">员工管理</span>
                            </el-menu-item>
                            <el-menu-item index="/attendanceAdmin" v-if="isAttendanceStatistics">
                                <i class="el-icon-s-flag"></i>
                                <span slot="title">考勤统计</span>
                            </el-menu-item>
                            <el-menu-item index="/userOutList" v-if="isOut">
                                <i class="el-icon-data-line"></i>
                                <span slot="title">在职统计</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item index="/approval" v-if="isApproval">
                            <i class="el-icon-s-claim"></i>
                            <span slot="title">审批中心</span>
                        </el-menu-item>
                        <el-submenu index="system" v-if="systemAdmin">
                            <template slot="title">
                                <i class="el-icon-s-tools"></i>
                                <span slot="title">系统管理</span>
                            </template>
                            <el-menu-item index="/organization">
                                <i class="el-icon-s-unfold"></i>
                                <span slot="title">组织架构</span>
                            </el-menu-item>
                            <el-menu-item index="/post">
                                <i class="el-icon-s-help"></i>
                                <span slot="title">岗位管理</span>
                            </el-menu-item>
                            <el-menu-item index="/dict">
                                <i class="el-icon-s-management"></i>
                                <span slot="title">系统字典</span>
                            </el-menu-item>
                            <el-menu-item index="/assign">
                                <i class="el-icon-thumb"></i>
                                <span slot="title">指派管理</span>
                            </el-menu-item>
                            <el-menu-item index="/attendanceSpecial">
                                <i class="el-icon-c-scale-to-original"></i>
                                <span slot="title">特殊考勤</span>
                            </el-menu-item>
                            <el-menu-item index="/attendanceSys">
                                <i class="el-icon-time"></i>
                                <span slot="title">考勤时间</span>
                            </el-menu-item>
                            <el-menu-item index="/attendanceAddress">
                                <i class="el-icon-location-outline"></i>
                                <span slot="title">考勤地点</span>
                            </el-menu-item>
                            <el-submenu index="roleAndpermission">
                                <template slot="title">
                                    <i class="el-icon-platform-eleme"></i>
                                    <span slot="title">系统权限</span>
                                </template>
                                <el-menu-item index="/role">
                                    <i class="el-icon-caret-right"></i>
                                    <span slot="title">角色管理</span>
                                </el-menu-item>
                                <el-menu-item index="/permission">
                                    <i class="el-icon-caret-right"></i>
                                    <span slot="title">权限管理</span>
                                </el-menu-item>
                                <el-menu-item index="/rolePermissions">
                                    <i class="el-icon-caret-right"></i>
                                    <span slot="title">角色权限</span>
                                </el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 下半区域的右侧主体 -->
                <el-main class="layout-main">
                    <!-- 主要内容 -->
                    <div class="body">
                        <!-- 由其它视图组件来显示 -->
                        <router-view/>
                    </div>
                    <!-- 版权信息 -->
                    <div class="copyright">
                        <p>Copyright &copy; 云上企业数字化智慧系统</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <!--   个人信息弹框   -->
        <el-dialog title="个人信息" :visible.sync="editInfoDialogVisible" :show-close="true"
                   :close-on-click-modal="true" center>
            <el-divider><i class="el-icon-reading"></i></el-divider>
            <!-- 添加类名“dialog-content”以方便统一样式 -->
            <div class="dialog-content">
                <div class="left-column">
                    <!-- 头像区域 -->
                    <el-image class="user-avatar" :src="currentUserAvatar"
                              style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="right-column">
                    <!-- 用户信息区域 -->
                    <div>
                        <el-tag>姓名：{{ currentUserName }}</el-tag>
                        <el-tag>性别：{{ sex }}</el-tag>
                        <el-tag>生日：{{ birthday }}</el-tag>
                        <el-tag>民族：{{ ethnic }}</el-tag>
                        <el-tag>身份：{{ identity }}</el-tag>
                        <el-tag>组织：{{ organization }}</el-tag>
                        <el-tag>职位：{{ job }}</el-tag>
                        <el-tag>账号：{{ account }}</el-tag>
                        <el-tag>邮箱：{{ email }}</el-tag>
                        <el-tag>微信：{{ vx }}</el-tag>
                        <el-tag>其他联系方式：{{ contact }}</el-tag>
                        <el-tag>入职时间：{{ createTime }}</el-tag>
                        <el-tag>自我介绍：{{ description }}</el-tag>
                        <el-tag>座右铭：{{ motto }}</el-tag>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
        </el-dialog>
        <!--  修改账号弹框  -->
        <el-dialog title="修改账号" :visible.sync="editAccountDialogVisible" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="updateAccountForm" :rules="updateAccountRules" ref="updateAccountForm" label-width="0px"
                     class="demo-ruleForm">
                <el-form-item label="" prop="account">
                    <el-input v-model="account" style="font-size: 16px;" :disabled="true">
                        <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                    </el-input>
                    <div style="height: 20px"></div>
                    <el-input v-model="updateAccountForm.account" style="font-size: 16px;" placeholder="请填写账号">
                        <template slot="prepend"><i class="el-icon-edit"></i></template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdateAccount()">取 消</el-button>
                <el-button type="primary" @click="handleUpdateAccount('updateAccountForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--  修改头像弹框  -->
        <el-dialog title="修改头像" :visible.sync="editAvatarDialogVisible" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="updateAvaterForm" label-width="120px" :rules="updateAvaterRules">
                <el-form-item label="修改头像:" prop="">
                    <img v-if="this.updateAvaterForm.updateAvater" :src="this.updateAvaterForm.updateAvater"
                         height="100px" width="100px" style="float: left" alt="上传失败">
                    <el-button type="primary" v-if="this.updateAvaterForm.updateAvater" icon="el-icon-document-copy"
                               style="margin-top: 28px;margin-left: 10px" @click="removeHandle()">覆盖原版
                    </el-button>
                    <el-upload action="' '" list-type="picture-card" accept=".jpg,.jpeg,.png"
                               :before-upload="beforeUploadHandle" style="float: left"
                               v-if="!this.updateAvaterForm.updateAvater" v-loading="this.loading">
                        <img width="100%" v-if="this.updateAvaterForm.updateAvater"
                             :src="this.updateAvaterForm.updateAvater" height="100%" alt="上传失败">
                        <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdateAvater()">取 消</el-button>
                <el-button type="primary" @click="handleUpdateAvater()">确 定</el-button>
            </div>
        </el-dialog>
        <!--  修改密码弹框  -->
        <el-dialog title="修改密码" :visible.sync="editPasswordDialogVisible" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="updatePasswordForm" :rules="updatePasswordRules" ref="updatePasswordForm" label-width="0px"
                     class="demo-ruleForm">
                <el-form-item label="" prop="oldPassword">
                    <el-input v-model="updatePasswordForm.oldPassword" style="font-size: 16px;"
                              placeholder="请填写原密码" show-password>
                        <template slot="prepend"><i class="el-icon-edit"></i></template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item label="" prop="newPassword">
                    <el-input v-model="updatePasswordForm.newPassword" style="font-size: 16px;"
                              placeholder="请填写新密码" :disabled="isOldPassword" show-password>
                        <template slot="prepend"><i class="el-icon-edit"></i></template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item label="" prop="confirmPassword">
                    <el-input v-model="updatePasswordForm.confirmPassword" style="font-size: 16px;"
                              placeholder="请重复填写新密码" :disabled="isNewPassword" show-password>
                        <template slot="prepend"><i class="el-icon-edit"></i></template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdatePassword()">取 消</el-button>
                <el-button type="primary" @click="handleUpdatePassword('updatePasswordForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {EventBus} from "@/event-bus";
import async from "async";

export default {
    data() {
        return {
            //是否具有审批操作的权限
            isApproval: false,
            //是否可见系统管理栏
            systemAdmin:false,
            //是否可以见考勤统计
            isAttendanceStatistics:false,
            // 是否可见员工管理
            isEmployee:false,
            //是否可见在职统计
            isOut:false,
            //是否可见工作台页面
            isWorkbench:false,
            //未读消息
            unreadRows:'',
            //最新消息
            lastRows:'',
            //激活路径进行跳转
            activeMenuItemPath: '',
            //当前用户姓名
            currentUserName: '',
            //当前用户头像
            currentUserAvatar: '',
            //修改用户头像
            updateAvaterForm: {
                updateAvater: ''
            },
            updateAvaterRules: {
                updateAvater: [
                    {require: true, message: "照片不能为空"}
                ]
            },
            avaterPaths: [],
            //是否具有头像
            isAvater: false,
            //不显示弹窗的关闭按钮
            isClose: false,
            //个人信息弹框是否可见
            editInfoDialogVisible: false,
            //修改账号弹框是否可见
            editAccountDialogVisible: false,
            //修改密码弹框是否可见
            editPasswordDialogVisible: false,
            //修改头像弹框是否可见
            editAvatarDialogVisible: false,
            //个人信息
            birthday: '',
            sex: '',
            ethnic: '',
            identity: '',
            organization: '',
            job: '',
            account: '',
            updateAccountForm: {
                account: ''
            },
            updateAccountRules: {
                account: [
                    {required: true, message: '请输入账户名', trigger: 'blur'},
                    {pattern: /^1[3-9]\d{9}$/, message: '账户名格式不正确', trigger: 'blur'}
                ]
            },
            updatePasswordForm: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            },
            isOldPassword: true,
            isNewPassword: true,
            updatePasswordRules: {
                oldPassword: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9]{4,8}$/,
                        message: '密码格式不正确,位数包含4-8位，只能是数字和字母混合组成必须至少包含一个数字和字母',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            console.log(value);
                            this.$http('/user/valid/password', 'POST', {password: value}, (resp) => {
                                if (resp.data.code === 20000) {
                                    this.isOldPassword = false;
                                    callback();
                                } else {
                                    return callback(new Error('原密码错误'));
                                }
                                callback();
                            });
                        }, trigger: 'blur'
                    }
                ],
                newPassword: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9]{4,8}$/,
                        message: '密码格式不正确,位数包含4-8位，只能是数字和字母混合组成必须至少包含一个数字和字母',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value.length >= 0) {
                                this.isNewPassword = false;
                            }
                            callback();
                        }, trigger: 'blur'
                    }
                ],
                confirmPassword: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9]{4,8}$/,
                        message: '密码格式不正确,位数包含4-8位，只能是数字和字母混合组成必须至少包含一个数字和字母',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.updatePasswordForm.newPassword) {
                                return callback(new Error('重复密码与新密码不一致'));
                            }
                            callback();
                        }, trigger: 'blur'
                    }
                ]
            },
            email: '',
            vx: '',
            contact: '',
            createTime: '',
            description: '',
            motto: '',
            loading: false,
            socketUrl: 'ws://192.168.43.10:9080/webSocket/',
            websocket: null,
            isConnected: false,
            messageQueue: [],
        }
    },
    mounted() {
        let that = this;
        this.handleActiveMenuItem();
        this.loadCurrentUserInfo();
        this.$http('/message/refreshMessage', 'GET', null, function (resp) {
            that.unreadRows = resp.data.unreadRows;
        });
    },
    //创建webSocket
    created() {
        this.initWebSocket();
    },
    //销毁webSocket
    beforeDestroy() {
        this.closeWebSocket();
    },
    methods: {
        //初始化webSocket
        initWebSocket() {
            let that = this;
            if ('WebSocket' in window) {
                this.websocket = new WebSocket("ws://"+this.webUrl+"/webSocket/" + localStorage.getItem("userId"));
                this.websocket.addEventListener('open', () => {
                    this.isConnected = true;
                    // 处理连接成功后的逻辑，如发送队列中的消息
                });
                this.websocket.addEventListener('close', () => {
                    this.isConnected = false;
                    // 处理连接关闭后的逻辑
                });
                this.websocket.addEventListener('message', (event) => {
                    this.$http('/message/refreshMessage', 'GET', null, function (resp) {
                        that.unreadRows = resp.data.unreadRows + 1;
                        that.lastRows = resp.data.lastRows;
                        console.log(event.data);
                        if (event.data === 'new message' || event.data === 'new approval') {
                            EventBus.$emit('newWebSocketMessage', event.data);
                            if (event.data === 'new approval') {
                                EventBus.$emit('newApproval', event.data);
                            }
                        }
                    });
                });

                this.websocket.addEventListener('error', (error) => {
                    console.error('WebSocket error:', error);
                    // 处理连接错误的逻辑
                });
            } else {
                console.error('WebSocket is not supported by your browser.');
            }
        },
        //关闭WebSocket
        closeWebSocket() {
            if (this.websocket && this.websocket.readyState !== WebSocket.CLOSED) {
                this.websocket.close();
            }
        },
        //发送消息给WebSocket进行处理
        sendMessage(message) {
            if (this.isConnected) {
                this.websocket.send(JSON.stringify(message)); // 假设消息为JSON格式
            } else {
                this.messageQueue.push(message); // 如果尚未连接，将消息加入队列
            }
        },
        //可选控件指令
        handleCommand(command) {
            if (command === 'userInfo') {
                this.openUserInfoDialog();
            } else if (command === 'updateAccount') {
                this.openUpdateAccountDialog();
            } else if (command === 'updateAvater') {
                this.openUpdateAvaterDialog();
            } else if (command === 'openLogoutConfirm') {
                this.openLogoutConfirm();
            } else if (command === 'updatePassword') {
                this.openUpdatePasswordDialog();
            }
        },
        //打开用户信息页面
        openUserInfoDialog() {
            this.editInfoDialogVisible = true;
        },
        //打开更新账号页面
        openUpdateAccountDialog() {
            this.editAccountDialogVisible = true;
        },
        //打开更新密码页面
        openUpdatePasswordDialog() {
            this.editPasswordDialogVisible = true;
        },
        //打开更新头像页面
        openUpdateAvaterDialog() {
            let that = this;
            if (that.isAvater) {
                that.$message({
                    message: '当前无证件照，请登记后再修改',
                    type: 'warning',
                    duration: 1200
                });
            } else {
                that.editAvatarDialogVisible = true;
            }
        },
        // 打开登出确认框
        openLogoutConfirm() {
            let message = '即将退出登录，是否继续？';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleLogout();
            }).catch(() => {
            });
        },
        //上传头像
        beforeUploadHandle(file) {
            let that = this;
            that.loading = true;

            const formData = new FormData();
            formData.append('files', file);
            formData.append('type', 'avater')
            // 设置请求头
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            this.$ajax.post('/cos/uploadCosFile', formData, config).then(resp => {
                let data = resp.data;
                that.loading = false;
                that.updateAvaterForm.updateAvater = data.result.urls[0];
                that.avaterPaths = data.result.pathes;
                that.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1200
                })
            });
            return false
        },
        //重新上传头像
        removeHandle() {
            let that = this;
            that.$ajax.post('/cos/deleteCosFile', {pathes: that.avaterPaths}).then(resp => {
                let data = resp.data;
                if (data.code === 20000) {
                    that.updateAvaterForm.updateAvater = '';
                    that.avaterPaths = [];
                }
            });
        },
        // 处理登出
        handleLogout() {
            let that = this;
            that.$http('/user/logout', 'POST', null, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    that.$message({
                        message: data.msg,
                        type: 'success'
                    });
                    localStorage.removeItem('token');
                    localStorage.removeItem('permissions');
                    localStorage.removeItem('userId');
                    localStorage.removeItem('roles');
                    // 跳转到登录页面
                    setTimeout(() => {
                        that.$router.push({name: 'login'});
                    }, 1000);
                }
            });
        },
        // 取消更新账号
        cancleUpdateAccount() {
            this.updateAccountForm.account = '';
            this.editAccountDialogVisible = false;
        },
        // 更新账号
        handleUpdateAccount(formName) {
            let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.$http('/user/update/account', 'PUT', that.updateAccountForm, (resp) => {
                        let data = resp.data;
                        that.$message({
                            message: data.msg,
                            type: 'success',
                            duration: 2000
                        });
                        setTimeout(() => {
                            localStorage.removeItem('token');
                            localStorage.removeItem('permissions');
                            that.$router.push({name: 'login'});
                        }, 2000);
                    })
                }
            })
        },
        //取消修改头像
        cancleUpdateAvater() {
            let that = this;
            if (that.avaterPaths.length > 0 || that.updateAvaterForm.updateAvater.length > 0) {
                that.removeHandle();
            }
            that.editAvatarDialogVisible = false
        },
        //确认修改头像
        handleUpdateAvater() {
            let that = this;
            that.$http('/update/avater_url', 'PUT', {
                url: that.updateAvaterForm.updateAvater
            }, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    that.$message({
                        message: data.msg,
                        type: 'success',
                        duration: 1200
                    });
                    that.editAvatarDialogVisible = false;
                    that.updateAvaterForm.updateAvater = '';
                    that.avaterPaths = [];
                }
            })
        },
        //取消修改密码
        cancleUpdatePassword() {
            let that = this;
            that.updatePasswordForm.oldPassword = '';
            that.updatePasswordForm.newPassword = '';
            that.updatePasswordForm.confirmPassword = '';
            that.isNewPassword = true;
            that.isOldPassword = true;
            that.editPasswordDialogVisible = false;
        },
        //确认修改密码
        handleUpdatePassword(formName) {
            let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.$http('/user/update/password', 'PUT', {password: that.updatePasswordForm.newPassword}, (resp) => {
                        let data = resp.data;
                        if (data.code === 20000) {
                            that.$message({
                                message: data.msg,
                                type: 'success',
                                duration: 1200
                            });
                            that.editPasswordDialogVisible = false;
                            that.updatePasswordForm.oldPassword = '';
                            that.updatePasswordForm.newPassword = '';
                            that.updatePasswordForm.confirmPassword = '';
                            localStorage.removeItem('token');
                            localStorage.removeItem('permissions');
                            setTimeout(() => {
                                that.$router.push({name: 'login'});
                            }, 1200)
                        }
                    });

                }
            });
        },
        // 加载当前用户信息
        loadCurrentUserInfo() {
            let that = this;
            that.$http('/user/info', 'POST', null, (resp) => {
                let data = resp.data;
                let user = data.userinfo.user;
                let message = '未填写信息';
                if (data.code === 20000) {
                    //获取当前用户的角色
                    if (data.userinfo.roles.length > 0 && localStorage.getItem('roles') == null) {
                        let roles = [];
                        for (let i = 0; i < data.userinfo.roles.length; i++) {
                            roles.push(data.userinfo.roles[i].name);
                        }
                        localStorage.setItem("roles", roles);
                    }
                    let roleArray = this.parseStringToArray(localStorage.getItem("roles"),',')
                    let permissionsArray = this.parseStringToArray(localStorage.getItem("permissions"),',')
                    //根据角色划分
                    if (roleArray.length > 0) {
                        if (roleArray.includes('系统管理员')) {
                            that.systemAdmin = true;
                        }
                    }
                    //根据权限划分
                    if(permissionsArray.length > 0){
                        //是否可见审批栏
                        if(permissionsArray.includes('approval:operation')){
                            that.isApproval = true;
                        }
                        //是否可见员工管理栏
                        if(permissionsArray.includes('user:admin')){
                            that.isEmployee = true;
                        }
                        //是否可见考勤统计
                        if(permissionsArray.includes('attendance:statistics')){
                            that.isAttendanceStatistics = true;
                        }
                        //是否可见在职统计
                        if(permissionsArray.includes('user:isIn')){
                            that.isOut = true;
                        }
                        //是否可见工作台
                        if(that.isEmployee || that.isAttendanceStatistics || that.isOut){
                            that.isWorkbench = true;
                        }
                    }

                    that.$http('/admin/getAdminOrganizations', 'POST', {
                        id:user.id
                    }, (resp) => {
                        let data = resp.data;
                        if(data.code === 20000){
                            if(data.organizations.length > 0){
                                that.isApproval = true;
                            }else {
                                that.isApproval = false;
                            }
                        }
                    })
                    if (user.isRegistration || user.name !== null) {
                        that.currentUserName = user.name;
                    } else {
                        that.currentUserName = '新员工';
                    }
                    if (user.isRegistration) {
                        that.currentUserAvatar = user.avater;
                    }
                    if (that.currentUserAvatar === null || that.currentUserAvatar === '') {
                        that.isAvater = true;
                        if (!user.isRegistration || user.sex === null) {
                            that.currentUserAvatar = require('@/assets/avater-default.jpg');
                        } else {
                            if (user.sex.name === '男') {
                                that.currentUserAvatar = require('@/assets/avater_man.png');
                            } else if (user.sex.name === '女') {
                                that.currentUserAvatar = require('@/assets/avater_woman.png');
                            } else {
                                that.currentUserAvatar = require('@/assets/avater-default.jpg');
                            }
                        }

                    }
                    if (!user.isRegistration || user.birthday == null) {
                        that.birthday = message
                    } else {
                        that.birthday = that.formatTime(user.birthday)
                    }
                    if (!user.isRegistration || user.sex == null) {
                        that.sex = message
                    } else {
                        that.sex = user.sex.name
                    }
                    if (!user.isRegistration || user.ethnic == null) {
                        that.ethnic = message
                    } else {
                        that.ethnic = user.ethnic.name
                    }
                    if (!user.isRegistration || user.identity == null) {
                        that.identity = message
                    } else {
                        that.identity = user.identity.name
                    }
                    if (user.organization == null) {
                        that.organization = message
                    } else {
                        that.organization = user.organization.name
                    }
                    if (!user.isRegistration || user.job == null) {
                        that.job = message
                    } else {
                        that.job = user.job.name
                    }
                    if (!user.isRegistration || user.admin == null) {
                        that.admin = message
                    } else {
                        that.admin = user.admin.name
                    }
                    if (user.account == null) {
                        that.account = message
                    } else {
                        that.account = user.account
                    }
                    if (user.email == null) {
                        that.email = message
                    } else {
                        that.email = user.email
                    }
                    if (!user.isRegistration || user.vx == null) {
                        that.vx = message
                    } else {
                        that.vx = user.vx
                    }
                    if (!user.isRegistration || user.contact == null) {
                        that.contact = message
                    } else {
                        that.contact = user.contact
                    }
                    if (!user.isRegistration || user.createTime == null) {
                        that.createTime = message
                    } else {
                        that.createTime = that.formatTime(user.createTime)
                    }
                    if (!user.isRegistration || user.description == null) {
                        that.description = message
                    } else {
                        that.description = user.description
                    }
                    if (!user.isRegistration || user.motto == null) {
                        that.motto = message
                    } else {
                        that.motto = user.motto
                    }
                }
            });
        },
        // 处理激活某个菜单项
        handleActiveMenuItem() {
            let path = this.$router.currentRoute.path;
            if (path.startsWith('/message')) {
                path = '/message';
            }
            if (path.startsWith('/user')) {
                path = '/user';
            }
            if (path.startsWith('/approval')) {
                path = '/approval';
            }
            if (path.startsWith('/organization')) {
                path = '/organization';
            }
            if (path.startsWith('/dict')) {
                path = '/dict';
            }
            if (path.startsWith('/post')) {
                path = '/post';
            }
            if (path.startsWith('/assign')) {
                path = '/assign';
            }
            if (path.startsWith('/attendanceSpecial')){
                path = '/attendanceSpecial';
            }
            this.activeMenuItemPath = path;
        }
    }
}
</script>
<style>
.dialog-content {
    display: flex;
}

.left-column, .right-column {
    flex: 1;
    padding: 3px;
}

.left-column {
    text-align: center;
}

.user-avatar {
    margin-bottom: 0px;
}

.layout-header {
    background: #28292e;
}

.layout-header .login-user {
    float: right;
    margin-top: 12px;
    display: flex;
}

.layout-header .login-user .welcome {
    line-height: 36px;
    color: #fff;
    margin-right: 10px;
}

.layout-header h1 {
    color: #fff;
    line-height: 60px;
    font-size: 20px;
}

.layout-body {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
}

.layout-aside {
    background: #3a4856;
}

.layout-aside .el-menu {
    border: 0;
}

.layout-aside i {
    color: #fff !important;
}

.layout-main {
    background: #f2f4f9;
}

.layout-main .body {
    background: #fff;
    padding: 30px;
}

.layout-main .copyright {
    width: 600px;
    margin: 0 auto;
    padding: 10px;
}

.layout-main .copyright p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #9e9e9f;
}

.align-with-icon {
    position: absolute;
    top: 50%;
    right: 6px; /* 调整为合适的距离，使其与图标对齐 */
    transform: translateY(-50%);
}

.el-menu-item.is-active {
    background: #405872 !important;
}
</style>